<template>
  <div class="Box">
    <!--<div class="titleBox">-->
      <!--<div class="titleTxt">-->
        <!--背景图更换-->
      <!--</div>-->
    <!--</div>-->
    <!--<div class="one">-->
      <!--<div class="txt">登录背景图</div>-->
      <!--<el-upload-->
        <!--class="avatar-uploader"-->
        <!--action-->
        <!--:http-request="uploadFile"-->
        <!--:show-file-list="false"-->
        <!--:on-success="handleAvatarSuccess"-->
        <!--:headers="headers"-->
        <!--:before-upload="beforeUpload">-->
        <!--<img v-if="imageUrl" :src="imageUrl" class="avatar">-->
        <!--<i v-else class="el-icon-plus avatar-uploader-icon"></i>-->
      <!--</el-upload>-->
    <!--</div>-->
    <div class="one">
      <div class="txt">logo图</div>
      <el-upload
        class="avatar-uploader"
        action
        :http-request="uploadFile2"
        :show-file-list="false"
        :on-success="handleAvatarSuccess"
        :headers="headers"
        :before-upload="beforeUpload">
        <img v-if="imageUrl2" :src="imageUrl2" class="avatar">
        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
      </el-upload>
      <div class="txt">提示: 点击图片进行更换logo图片。</div>
      <div class="txt">提示: logo图片请使用尺寸比例为200*32的PNG。</div>
    </div>
  </div>
</template>

<script>
  import file from '../../../../api/igs/logo/file';

  export default {
    name: 'index',
    data() {
      return {
        action: "",
        imageUrl: '',
        imageUrl2: '',
        headers: {"Content-Type": "multipart/form-data"},
        fileType: ["png", "jpg", "jpeg", "svg"],
      }
    },
    components: {},
    computed: {},
    watch: {},
    created() {

    },
    activated() {
    },
    mounted() {
      this.hasAll()

    },
    methods: {
      hasAll() {
        file.hasAll('', (res) => {
          if (res.status == 0) {
            for (let i = 0; i < res.data.length; i++) {
              if (res.data[i].type == 1) {
                this.imageUrl = '/datas' + res.data[i].path
              }
              if (res.data[i].type == 2) {
                this.imageUrl2 = '/datas' + res.data[i].path
              }
            }
          }
        })
      },
      handleAvatarSuccess(res, file) {
        // console.log(res)
        // console.log(file)
        // this.imageUrl = URL.createObjectURL(file.raw);
      },
      beforeUpload(file) {
        if (file.type != "" || file.type != null || file.type != undefined) {
          //截取文件的后缀，判断文件类型
          const FileExt = file.name.replace(/.+\./, "").toLowerCase();
          //计算文件的大小
          const isLt5M = file.size / 1024 / 1024 < 50; //这里做文件大小限制
          //如果大于50M
          if (!isLt5M) {
            this.$showMessage('上传文件大小不能超过 50MB!');
            return false;
          }
          //如果文件类型不在允许上传的范围内
          if (this.fileType.includes(FileExt)) {
            return true;
          }
          else {
            this.$message.error("上传文件格式不正确!");
            return false;
          }
        }
      },
      uploadFile(item) {
        // this.$showMessage('文件上传中........')
        //上传文件的需要formdata类型;所以要转
        // console.log(item)
        let FormDatas = new FormData()
        FormDatas.append('file', item.file);
        FormDatas.append("type", 1);
        FormDatas.append("note", '登录背景图');
        file.upload(FormDatas, (res) => {
          if (res.status == 0) {
            this.hasAll()
          }
        })
      },
      uploadFile2(item) {
        // this.$showMessage('文件上传中........')
        //上传文件的需要formdata类型;所以要转
        // console.log(item)
        let FormDatas = new FormData()
        FormDatas.append('file', item.file);
        FormDatas.append("type", 2);
        FormDatas.append("note", 'logo图');
        file.upload(FormDatas, (res) => {
          if (res.status == 0) {
            this.hasAll()
          }
        })
      },

    }

  }
</script>

<style  scoped>
  .Box .titleBox {
    margin-bottom: 20px;
  }

  .Box .one {
    margin-left: 14px;
    background: #293640;
    padding: 10px;
    color: #ffffffe6;
  }

  .Box .one .txt {
    font-size: 16px;
    text-align: left;
  }

  .Box .one .avatar-uploader {
    text-align: left;
    margin: 10px;
  }

  .Box .one .avatar-uploader .el-upload {
    border: 1px dashed #566673;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }

  .Box .one .avatar-uploader .el-upload:hover {
    border-color: #566673;
    border-color: #263967;
    border-color: #4b6394;
  }

  .Box .one .avatar-uploader .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 320px;
    height: 180px;
    line-height: 180px;
    text-align: center;
  }

  .Box .one .avatar-uploader .avatar {
    width: 800px;
    height: 128px;
    display: block;
  }
</style>
